<template>
    <div class="page-user-login">
        <h1 class="login-title">
            <img
                src="../../../../assets/img/sign_logo.png"
                class="logo" 
                alt="">
        </h1>
        <div class="login-form">
            <van-cell-group>
                <van-field
                    placeholder="请输入手机号码"
                    left-icon="phone"
                    clearable
                    v-model="form.mobile"/>
                <van-field
                    v-model="form.code"
                    center
                    clearable
                    left-icon="more"
                    placeholder="短信验证码"
                >
                    <van-button 
                        :disabled="hadSend || !form.mobile"
                        slot="button" 
                        size="small" 
                        type="primary" @click="onSend">发送验证码</van-button>
                </van-field>
            </van-cell-group>
            <div class="btn-submit">
                <van-button 
                    :disabled="!(form.mobile && form.code && hadSend)"
                    type="primary" block @click="onSubmit">登录</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mobileLogin } from '../../api/user'
import { smscode } from '../../api/sms'
export default {
    data(){
        return {
            form: {
                mobile: '',
                code: ''
            },
            hadSend: false,
        }
    },
    methods: {
        onSubmit(){
            mobileLogin(this.form).then(rsp => {
                if(rsp.code === 200){
                    this.$toast.success('登录成功')
                    localStorage.customerInfo = JSON.stringify(rsp.data)
                    localStorage.customerId = rsp.data.id
                    if(localStorage.OriginalPageUrl){
                        location.href = localStorage.OriginalPageUrl
                    }else{
                        this.$router.replace({name: 'hireFind'})
                    }
                }
            })
        },

        onSend(){
            smscode({
                smsType: 1,
                phoneNumber: this.form.mobile
            }).then(rsp => {
                if(rsp.code === 200){
                    this.$toast.success('发送成功');
                }
                this.hadSend = true
            })
        }
    }
}
</script>

<style lang="less">
.page-user-login{
    padding: 0 15px;
    .login-title{
        img{
            display: block;
            height: 44px;
            margin: 30px auto;
            overflow: hidden;
        }
    }
    .login-form{
        .btn-submit{
            padding: 30px;
        }
    }
}
</style>
